<template>
	<view style="display: flex;flex-direction: row;">
		
		<view style="display: flex;flex-direction: column;width: 220upx;background-color: #001529;">
			<image src="../../static/admin.png" mode="aspectFill" class="admin_pic"></image>
			<view v-for="(item,index) in functionList" :key=index>
				<view style="margin-top: 20upx;padding: 20upx;width: 180upx;display: flex;flex-direction: row;color: #FFFFFF;font-size: 15px;align-items: center;">
					<image :src="item.icon" style="width: 15upx;height: 15upx;margin-right: 5upx;"></image>
					{{item.name}}
					<image src="../../static/arrow.png" class="arrow"></image>
				</view>
				<view v-for="(items,indexs) in item.page" @click="menu_change(items)" :key=indexs :class="menu_id==items.id?'choose_detail':'detail'">
					{{items.name}}
				</view>
			</view>
		</view>
		
		<scroll-view scroll-y='true' style="background-color: #F6F8F9;width: 100%;height: 100vh;">
			<view style="box-shadow: -1px -1px 5px #888888;width: 100%;background-color: #FFFFFF;height: 50upx;display: flex;flex-direction: row;align-items: center;font-size: 17px;">
				<image src="../../static/admin1.png" style="width: 20upx;height: 20upx;margin-left: 25upx;"></image>
				<view style="margin-left: 5upx;">
					后台管理
				</view>
				<view style="margin-left: 5upx;display: flex;justify-content: center;align-items: center;">
					<image src="../../static/arrow1.png" class="arrow1"></image>
				</view>
				<view style="margin-left: 5upx;">
					{{name}}
				</view>
				<image src="http://t7.baidu.com/it/u=1880899253,2364657333&fm=193" style="width: 40upx;height: 40upx;border-radius: 50%;margin-left: auto;"></image>
				<view style="color: #6C6E72;font-weight: bold;padding: 0 10upx 0 10upx;">
					admin
				</view>
				<image src="../../static/arrow2.png" class="arrow1" style="margin-right: 10upx;"></image>
			</view>
			<swiper :current='menu_id' disable-touch=true style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
				<swiper-item>
					<scroll-view scroll-y="true" style="height: 98vh;">
						
						<person_admin :PersonList='PersonList' style="margin-top: -30upx;width: 100%;height: 90%;display: flex;justify-content: center;align-items: center;"></person_admin>
						
					</scroll-view>
					
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" style="height: 98vh;">
					</scroll-view>
					
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" style="height: 105vh;">
						<Project :pageList='pageList' :pageCount='pageCount'  style="margin-top: -30upx;width: 100%;height: 90%;display: flex;justify-content: center;align-items: center;"></Project>
					</scroll-view>
					
				</swiper-item>
				<swiper-item style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
					<scroll-view scroll-y="true" style="height: 98vh;">
						
						<Lcb :pageList='lcbList' :count='lcbCount'  style="width: 100%;"></Lcb>
						
						
					</scroll-view>
					
				</swiper-item>
				
				<swiper-item style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
					<scroll-view scroll-y="true" style="height: 98vh;">
						
						<tousu :tousuList='tousuList' style="width: 100%;"></tousu>
						
						
					</scroll-view>
					
				</swiper-item>
				
				<swiper-item style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
					<scroll-view scroll-y="true" style="height: 98vh;">
					
						<blockchain :chainList='chainList' style="width: 100%;"></blockchain>
						
						
					</scroll-view>
					
				</swiper-item>
				
				<swiper-item style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
					<scroll-view scroll-y="true" style="height: 98vh;">
						<contract :chainList='contractList'  style="width: 100%;"></contract>
						
					</scroll-view>
					
				</swiper-item>
			</swiper>
			
		</scroll-view>
		
		
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import person_admin from "@/components/admin-components/person_admin.vue"
	import Project from "@/components/admin-components/project.vue"
	import Lcb from "@/components/admin-components/lcb.vue"
	import tousu from "@/components/admin-components/tousu.vue"
	import contract from "@/components/admin-components/contract.vue"
	import blockchain from "@/components/admin-components/blockchain.vue"
	import global from "@/common/global.js"
	export default{
		components: {
			uniPopup,
			person_admin,
			Project,
			Lcb,
			tousu,
			contract,
			blockchain
			
		},
		data(){
			return{
				menu_id:0,
				NowPage:1,
				name:'认证审核',
				functionList:[
					{
						name:'人员审核',
						icon:'/static/personAdmin.png',
						// id:1,
						open:false,
						page:[
							{
								name:'认证审核',
								id:0
							},
						]
					},
					{
						name:'项目管理',
						icon:'/static/shopAdmin.png',
						// id:4,
						open:false,
						page:[
							{
								name:'项目初审',
								id:2
							},
							{
								name:'里程碑审查',
								id:3
							},
							{
								name:'项目投诉',
								id:4
							}
						]
					},
					{
						name:'区块链查看',
						icon:'/static/shopAdmin.png',
						// id:4,
						open:false,
						page:[
							{
								name:'上链记录',
								id:5
							},
							{
								name:'投资记录',
								id:6
							},
						]
					}
				],
				// 人员管理数据
				PersonList:[],
				
				pageList:[],
				pageCount:{},
				tousuList:[],
				
				contractList:[],
				
				chainList:[],
				
				lcbList: [],
				lcbCount: {},
			}
		},
		onLoad() {
			
			
			var that =this
			uni.request({
				url:global.baseUrl+'api/user/user_admin_list',
					method: "GET",
					header: {
					},
					data:{
					},
					success: function (res) {
						that.PersonList = res.data.data
						// console.log(that.PersonList)
			 		}
				})	
			uni.request({
				url:global.baseUrl+'api/admin/task_admin_main',
					method: "GET",
					header: {
					},
					data:{
					},
					success: function (res) {
						that.pageList = res.data.data.task
						that.pageCount = res.data.data.count
						
			 		}
				})		
			uni.request({
				url:global.baseUrl+'api/admin/task_admin_lcb',
					method: "GET",
					header: {
					},
					data:{
					},
					success: function (res) {
						that.lcbList = res.data.data.lcb_list
						that.lcbCount = res.data.data.count
						
			 		}
				})	
			uni.request({
				url:global.baseUrl+'api/admin/task_admin_tousu',
					method: "GET",
					header: {
					},
					data:{
					},
					success: function (res) {
						that.tousuList = res.data.data.tousu
			 		}
				})	
			uni.request({
				url:global.baseUrl+'api/admin/task_admin_block',
					method: "GET",
					header: {
					},
					data:{
					},
					success: function (res) {
						that.chainList = res.data.data.block
			 		}
				})
			uni.request({
				url:global.baseUrl+'api/admin/task_admin_touzi',
					method: "GET",
					header: {
					},
					data:{
					},
					success: function (res) {
						console.log(res.data.data)
						that.contractList = res.data.data.touzi
			 		}
				})
		},
		methods:{
			menu_change:function(e){
				var that = this
				that.menu_id = e.id
				that.name = e.name
			},
			
					
		}
	}
</script>

<style>
	.add_color{
		background-color: #1890FF;
		
	}
	.add_color:hover{
		background-color: #46A6FF;
	}
	.admin_pic{
		width: 180upx;
		height: 50upx;
		padding: 20upx;
	}
	.admin_pic:hover{
		background-color: #2C405A;
	}
	.arrow{
		height: 20upx;
		width: 20upx;
		
		margin-left: auto;
	}
	.arrow1{
		height: 18upx;
		width: 18upx;
		
	}
	.choose_detail{
		padding: 20upx 20upx 20upx 40upx;
		width: 160upx;
		display: flex;
		flex-direction: row;
		color: #FFFFFF;
		font-size: 15px;
		align-items: center;
		background-color: #1890FF;
	}
	.detail{
		padding: 20upx 20upx 20upx 40upx;
		width: 160upx;
		display: flex;
		flex-direction: row;
		color: #FFFFFF;
		font-size: 15px;
		align-items: center;
		
	}
	.detail:hover{
		background-color: #1890FF;
	}
	.list_detail{
		border-bottom: 1px solid #EBEEF5;display: flex;flex-direction: row;width: 100%;padding: 10upx;
	}
	.list_detail:hover{
		background-color: #F5F7FA;
	}
	.alter{
		color: #1890FF;
	}
	.alter:hover{
		text-decoration: underline;
		color: #DD524D;
	}
	.delete{
		color: #1890FF;margin-left: 10upx;
	}
	.delete:hover{
		text-decoration: underline;
		color: #DD524D;
	}
	.left{
		background-color: #F4F4F5;
		width: 15upx;
		height: 15upx;
		padding: 10upx;
	}
	.page{
		color: #FFFFFF;
		background-color: #1890FF;
		width: 32upx;
		height: 32upx;
		font-size: 15px;
		border-radius: 3upx;
		text-align: center;
		justify-content: center;
		display: flex;
		align-items: center;
		margin-left: 10upx;
	}
	.nopage{
		color: #FFFFFF;
		background-color: #F4F4F5;
		width: 32upx;
		height: 32upx;
		font-size: 15px;
		border-radius: 3upx;
		text-align: center;
		justify-content: center;
		display: flex;
		align-items: center;
		margin-left: 10upx;
		color: #606270;
	}
	.right{
		margin-left: 10upx;
		background-color: #F4F4F5;
		width: 15upx;
		height: 15upx;
		padding: 10upx;
	}
	.input_account{
		padding: 5upx 15upx 5upx 15upx;border: 1px solid #DCDFE6;width: 250upx;font-size: 13px;margin-left: 20upx;
	}
	.input_account:hover{
		border: 1px solid #C8C7CC;
	}
	.input_account1{
		padding: 5upx 15upx 5upx 15upx;border: 1px solid #DCDFE6;width: 227upx;font-size: 13px;margin-left: 20upx;
	}
	.input_confirm{
		border: 1px solid #1890FF;
		padding: 5upx 15upx 5upx 15upx;width: 250upx;font-size: 13px;margin-left: 20upx;
	}
	.back_color{
		background-color: #FF4D4F;
	}
	.back_color:hover{
		background-color: #FF7172;
	}
</style>
